import { useEffect, useState } from "react";
import BeScroll from "../../components/loading/index";
import { useLocation, useHistory } from "react-router-dom";
import api from "../../api/index";
import { Swiper, Toast, Tag } from "antd-mobile/2x";

import "./index.scss";
let labelStyle = {
  background: "none",
  border: "none",
};
function Detail() {
  const [detail, setDetail] = useState<any>({});
  const { state }: any = useLocation();
  const [is, setIs] = useState(false);
  const history = useHistory();
  //查看收藏
  const getIs = () => {
    api.getIsFavorites({ id: state.id }).then((res: any) => {
      setIs(res.body.isFavorite);
    });
  };
  useEffect(() => {
    getIs();
    //初始化详情数据
    const getList = async () => {
      //查看是否收藏
      let res: any = await api.getHousesDetail({ id: state.id });
      setDetail(res.body);
      const BMap = require("BMap");
      // 创建地图实例
      const map = new BMap.Map("BMap_mask");
      // 创建点坐标
      const point = new BMap.Point(
        res.body.coord.longitude,
        res.body.coord.latitude
      );
      //遮盖物坐标
      const opts = {
        //坐标;
        position: point,
        //偏移
        offset: new BMap.Size(-25, -25),
      };
      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(point, 15);
      //添加遮盖物的方法
      const label = new BMap.Label(
        "<i class='iconfont icon-zuobiao zb'></i>",
        opts
      );
      //设置样式;
      label.setStyle(labelStyle);
      //把写好的覆盖物给添加到地图中;
      map.addOverlay(label);
    };
    getList();
  }, [state.id]);

  const price = [
    {
      name: "租金",
      title: detail.price,
    },
    {
      name: "房型",
      title: detail.roomType,
    },
    {
      name: "面积",
      title: detail.size + "平米",
    },
  ];
  const icon: any = {
    衣柜: "iconfont icon-yigui",
    洗衣机: "icon-xiyiji iconfont",
    空调: "iconfont icon-kongtiao",
    天然气: "iconfont icon-meiqitianranqi",
    冰箱: "iconfont icon-bingxiang",
    热水器: "iconfont icon-haofangtuo400iconfont2reshuiqi",
    沙发: "iconfont icon-shafa",
    电视: "iconfont icon-dianshiju",
    宽带: "iconfont icon-kuandai",
  };
  //轮播图
  const items =
    detail.houseImg &&
    detail.houseImg.map((item: any, index: number) => (
      <Swiper.Item key={index}>
        <div
          className="content"
          onClick={() => {
            Toast.show(`你点击了卡片 ${index + 1}`);
          }}
        >
          <img src={"http://47.102.145.189:8009" + item} alt="img" />
        </div>
      </Swiper.Item>
    ));
  const addSc = () => {
    if (!is) {
      //添加收藏
      api.addFavorites({ id: state.id }).then((res: any) => {
        Toast.show({
          content: res.description,
        });
        setIs(true);
      });
    } else {
      api.delFavorites({ id: state.id }).then((res: any) => {
        Toast.show({
          content: res.description,
        });
        setIs(false);
      });
    }
  };
  return (
    <div className="detail">
      {detail ? (
        <div className="container">
          {/* 导航 */}
          <div className="navbar">
            <i
              className="iconfont icon-zuojiantou"
              onClick={() => history.go(-1)}
            ></i>
            <h3>{detail.community}</h3>
            <i className="iconfont icon-fenxiang"></i>
          </div>
          <div className="bottomDetails">
            <BeScroll myClass="details">
              <div>
                {/* 轮播图 */}
                <Swiper autoplay loop>
                  {items}
                </Swiper>
                {/* 内容 */}
                <div className="detail-info">
                  <div className="detail-infoTitle">
                    <h3>{detail.title}</h3>
                    <div className="infotitle-box">
                      {detail.tags &&
                        detail.tags.map((item: any, i: number) => {
                          return (
                            <Tag color="#e1f5f8" key={i}>
                              <span style={{ color: "#39becd" }}>{item}</span>
                            </Tag>
                          );
                        })}
                    </div>
                  </div>
                  <div className="detail-price">
                    {detail.price &&
                      price.map((v: any, i: number) => {
                        return (
                          <div className="price-item" key={i}>
                            <div className="item">
                              {v.title}
                              <span>{i === 0 ? "/月" : ""}</span>
                            </div>
                            <div>{v.name}</div>
                          </div>
                        );
                      })}
                  </div>
                  <div className="detail-basac">
                    <div className="basac-item">
                      <span>装修：</span>
                      <p>精装</p>
                    </div>
                    <div className="basac-item">
                      <span>朝向：</span>
                      <p>{detail.oriented && detail.oriented[0]}</p>
                    </div>
                    <div className="basac-item">
                      <span>楼层：</span>
                      <p>{detail.floor && detail.floor}</p>
                    </div>
                    <div className="basac-item">
                      <span>类型：</span>
                      <p>普通住宅</p>
                    </div>
                  </div>
                </div>
                {/* 地图 */}
                <div className="detail-map">
                  <h3 className="map-title">
                    小区: {detail.community && detail.community}
                  </h3>
                  <div id="BMap_mask"></div>
                </div>
                {/* 配置 */}
                {detail.supporting !== "" && (
                  <div className="detail-about">
                    <h3>房屋配套</h3>
                    <div className="about-content">
                      {detail.supporting
                        ? detail.supporting.map((item: any, i: number) => {
                            return (
                              <div className="about-item" key={i}>
                                <i className={icon[item]}></i>
                                <span>{item}</span>
                                <span></span>
                              </div>
                            );
                          })
                        : ""}
                    </div>
                  </div>
                )}

                {/* 介绍 */}
                <div className="detai-introduce">{}</div>
              </div>
            </BeScroll>
          </div>
          <div className="detailsFooter">
            <p onClick={() => addSc()} style={{ color: is ? "red" : "#000" }}>
              {is ? "取消收藏" : "收藏"}
            </p>
            <p>在线咨询</p>
            <p>电话联系</p>
          </div>
        </div>
      ) : (
        ""
      )}
    </div>
  );
}

export default Detail;
